<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="消息通知" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view>
			<view class="dfj-pd-30 dfj-f-26 dfj-t-666">
				<text class="dfj-icon icon-new dfj-f-35"></text> <text class="dfj-mg-l-20">最新消息</text>
			</view>
			<view class="dfj-pd-lr-30 dfj-pd-tb-20" v-if="counts.length>0">
				<navigator :url="`/pages/my/message-content?type=1`" class="dfj-flex dfj-flex-ai-c dfj-mg-b-30">
					<view class="dfj-ps-r">
						<uni-badge v-if="counts[0].count != 0" :text="counts[0].count" type="error" style="position: absolute;top: -15rpx;right:-10rpx;display: inline-block;z-index: 9;width: auto;"></uni-badge>
						<image src="/static/img/my/wallet.png" style="width: 100rpx;height: auto;" mode="widthFix"/>
					</view>
					<view class="dfj-flex-1 dfj-mg-l-25">
						<view class="dfj-flex dfj-flex-ai-c dfj-mg-b-15">
							<view class="dfj-flex-1 dfj-f-30">账户通知</view>
							<view class="dfj-t-999 dfj-f-22" v-if="counts[0].createDate != 0">{{ counts[0].createDate | timestampToTime }}</view>
						</view>
						<view class="dfj-t-999">{{ counts[0].content }}</view>
					</view>
				</navigator>
				
				<navigator :url="`/pages/my/message-content?type=2`" class="dfj-flex dfj-flex-ai-c dfj-mg-b-30">
					<view class="dfj-ps-r">
						<uni-badge v-if="counts[1].count != 0" :text="counts[1].count" type="error" style="position: absolute;top: -15rpx;right:-10rpx;display: inline-block;z-index: 9;width: auto;"></uni-badge>
						<image src="/static/img/my/inform.png" style="width: 100rpx;height: auto;" mode="widthFix"/>
					</view>
					<view class="dfj-flex-1 dfj-mg-l-25">
						<view class="dfj-flex dfj-flex-ai-c dfj-mg-b-15">
							<view class="dfj-flex-1 dfj-f-30">服务通知</view>
							<view class="dfj-t-999 dfj-f-22" v-if="counts[1].createDate != 0">{{ counts[1].createDate | timestampToTime }}</view>
						</view>
						<view class="dfj-t-999">{{ counts[1].content }}</view>
					</view>
				</navigator>
				
				<navigator :url="`/pages/my/message-content?type=3`" class="dfj-flex dfj-flex-ai-c">
					<view class="dfj-ps-r">
						<uni-badge v-if="counts[2].count != 0" :text="counts[2].count" type="error" style="position: absolute;top: -15rpx;right:-10rpx;display: inline-block;z-index: 9;width: auto;"></uni-badge>
						<image src="/static/img/my/logistics.png" style="width: 100rpx;height: auto;" mode="widthFix"/>
					</view>
					<view class="dfj-flex-1 dfj-mg-l-25">
						<view class="dfj-flex dfj-flex-ai-c dfj-mg-b-15">
							<view class="dfj-flex-1 dfj-f-30">交易物流</view>
							<view class="dfj-t-999 dfj-f-22" v-if="counts[2].createDate != 0">{{ counts[2].createDate | timestampToTime }}</view>
						</view>
						<view class="dfj-t-999">{{ counts[2].content }}</view>
					</view>
				</navigator>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				counts: [],
			}
		},
		filters: {
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			}
		},
		onShow() {
			this.getCount()
		},
		methods:{
			leftBack() {
				uni.navigateBack();
			},
			getCount() {
				this.$http({
					url: '/userOpt/queryPushMessageCount',
					method: 'GET'
				}).then(res=>{
					this.counts = res.data
				})
			}
		}
	}
</script>

<style>
</style>
